<template>
  <div class="container">
    <div class="top-div1">
      <el-button style="margin-right: 50px;float: right" icon="el-icon-plus" type="primary" @click="centerDialogVisible = true">新增</el-button>
    </div>
    <el-table style="width: 100%" :data="tableData" border>
      <el-table-column label="课题名称" align="left">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.className }}</span>
        </template>
      </el-table-column>
      <el-table-column label="地址" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.address"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="系统名称" align="left">
        <template slot-scope="scope">
          <el-input v-model="scope.row.systemName"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-edit" @click="edit(scope)">编辑</el-button>
          <el-button type="text" size="small" icon="el-icon-delete" @click="deleteRole(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px auto;width: 500px;">
      <el-pagination background
                     @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-size="pageSize" layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>

    <el-dialog
        title="新增"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
      <el-form label-position="right" label-width="80px">
        <el-form-item label="课题名称">
          <el-input v-model="addParam.className" placeholder="请输入课题名称"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="addParam.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="系统名称">
          <el-input v-model="addParam.systemName" placeholder="请输入系统名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitAdd">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="修改"
        :visible.sync="centerModifyDialogVisible"
        width="30%"
        center>
      <el-form label-position="right" label-width="80px">
        <el-form-item label="课题名称">
          <el-input v-model="modifyParam.className" placeholder="请输入课题名称"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="modifyParam.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="系统名称">
          <el-input v-model="modifyParam.systemName" placeholder="请输入系统名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerModifyDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitEdit">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/utils/api';
import * as echarts from "echarts";
import axios from 'axios'
import data from "@/assets/data1.json";

export default {
  mounted() {
    this.initTable()
  },
  computed: {},
  data() {
    return {
      userTypeList: [
        {
          value: '超级管理员',
          label: '超级管理员'
        }, {
          value: '一般人员',
          label: '一般人员'
        }],
      userRoleList: [
        {
          value: '院长',
          label: '院长'
        }, {
          value: '副院长',
          label: '副院长'
        },
        {
          value: '庭长',
          label: '庭长'
        }, {
          value: '执行局长',
          label: '执行局长'
        },
        {
          value: '纪检组',
          label: '纪检组'
        }, {
          value: '审官办',
          label: '审官办'
        },
        {
          value: '督察室',
          label: '督察室'
        }, {
          value: '法官',
          label: '法官'
        }],
      modifyParam: {
        className: '',
        address: '',
        systemName: ''
      },
      addParam: {
        className: '',
        address: '',
        systemName: ''
      },
      centerDialogVisible: false,
      centerModifyDialogVisible: false,
      options: [
        {
          value: '正常',
          label: '正常'
        }, {
          value: '停用',
          label: '停用'
        }],
      currentPage: 1,
      total: 0,
      pageSize: 10,
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      tableData: [],
      sourceTableData: [],
      currentIndex:null
    }
  },
  methods: {
    indexMethod(index) {
      return index + 1;
    },
    submitAdd() {
      this.alertSuccess('新增成功')
      this.centerDialogVisible = false
      this.tableData.push(this.addParam)
    },
    submitEdit() {
      this.tableData[this.currentIndex] = this.modifyParam
      this.tableData =JSON.parse(JSON.stringify( this.tableData));
      this.alertSuccess('编辑成功')
      this.centerModifyDialogVisible = false
    },
    edit(scope) {
      this.modifyParam = JSON.parse(JSON.stringify(scope.row));
      this.currentIndex = scope.$index
      this.centerModifyDialogVisible = true
    },
    deleteRole(row) {
      let index = this.tableData.findIndex((ele) => {
        return ele.className === row.className
      })
      if (index === -1) {
        return
      }
      console.log(index)
      this.tableData.splice(index, 1)
    },
    alertSuccess(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
    alertError(msg) {
      this.$message({
        message: msg,
        type: 'error'
      });
    },
    handleStatusChange(row) {
      console.log('Status changed to', row.status);
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.initTable();
    },
    //切换当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initTable();
    },
    getNeedArr(array, size) {
      const length = array.length;
      if (!length || !size || size < 1) {
        return [];
      }
      let index = 0;
      let resIndex = 0;
      let result = new Array(Math.ceil(length / size));
      while (index < length) {
        result[resIndex++] = array.slice(index, (index += size));
      }
      return result;
    },
    formattedFeatures(tableFeatures) {
      return tableFeatures.map(feature => feature + '<br>').toString().replaceAll("[", "")
          .replaceAll("]", "")
          .replaceAll(",", "")
          .replaceAll("\"", "");
    },
    initTable() {
      var data = [
        {
          className: '课题一',
          address: 'http://132.181.23.421:8901/zdaj',
          systemName: '重大案件监督预警系统'
        },
        {
          className: '课题二',
          address: 'http://142.181.23.421:8902/wgaj',
          systemName: '违规案件监督预警系统'
        },
        {
          className: '课题三',
          address: 'http://152.181.23.421:8903/bajd',
          systemName: '办案节点监督预警系统'
        },
        {
          className: '课题四',
          address: 'http://172.181.23.421:8904/rylz',
          systemName: '人员廉政监督预警系统'
        }
      ]
      this.tableData = data
      this.total = this.tableData.length
      this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    },
    resetTable() {
      var data = [
        {
          code: 1,
          username: 'admin',
          userType: '超级管理员',
          userRole: '',
          deptName: '湖南省纪委',
          phone: '17053070000',
          status: "1"
        },
        {
          code: 2,
          username: '王杰',
          userType: '一般人员',
          userRole: '院长',
          deptName: '长沙市中级人民法院',
          phone: '13896541235',
          status: "0"
        }
      ]

      this.tableData = data
      this.total = this.tableData.length
      this.pageSize = 10
      this.currentPage = 1
      this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    },
    searchCases() {
      if (this.input1) {
        this.tableData = this.tableData.filter(item => item.roleName.includes(this.input1));
        this.total = this.tableData.length
        this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
      } else {
        this.initTable()
      }

    }
  }
};
</script>
<style scoped>
.el-form .el-input {
  width: 300px;
}

.el-form .el-select {
  width: 300px;
}

.container-footer {
  text-align: center;
  height: 30px;
  line-height: 30px;
  padding-top: 10px;
}

.top-div {
  min-width: 1200px;
  height: 50px;
  padding: 2px;
}

.top-div1 {
  min-width: 1200px;
  height: 50px;
  padding-top: 5px;
  padding-left: 10px;
}

.container {
  min-width: 1200px;
  display: block;
  clear: both;
}

.clearfix:after {
  clear: both
}

/deep/ .el-table .el-table__header th,
.el-table .el-table__header tr,
.el-table .el-table__header td {
  background: #f5f8fd;
}


</style>